<template>
    <div class="drawer_content">
        <el-drawer title="" :visible.sync="filtrateData.show" direction="rtl" :before-close="handleClose" :size='328'>
            <div class="pt20  h100 w100 scroll_all">
                <div class="scroll_content">
                    <div class="">
                        <div class="ml10 mb15 fw500 f13 tl">时间类型</div>
                        <div class="row time_button">
                            <el-button type="filtrate_button_time" :plain="searchData.DateType == 0"
                                @click="timeTypeChange(0)">预检时间</el-button>
                            <!-- <el-button type="filtrate_button" :plain="searchData.DateType == 1"
                                @click="timeTypeChange(1)">签到时间</el-button> -->
                            <!-- 暂时不需要签到时间 -->
                            <el-button type="filtrate_button_time" :plain="searchData.DateType == 1"
                                @click="timeTypeChange(1)">登记时间</el-button>
                        </div>
                        <div class="mt10 mb10 ml10 mr10 time_class">
                            <SearchTime :initTime="initTime" @getTimes="getSearchTimes"></SearchTime>
                        </div>
                    </div>
                    <!-- <div class="item mt10">
                        <div class="ml10 mb15 fw500 f13 mt10">检查状态</div>
                        <div class="grid_content ">
                            <el-button class="mb10 ml10 " v-for="item in stateList" type="filtrate_button"
                                :plain="searchData.OrderState == item.code" @click="stateChange(item)">{{ item.name
                                }}</el-button>
                        </div>

                    </div> -->
                    <div class="item mt10">
                        <div class="ml10 mb15 fw500 f13 mt10 tl">检查类型</div>
                        <div class="grid_content ">
                            <el-button class="mb10 ml10 " v-for="item in typeList" type="filtrate_button"
                                :plain="searchData.ExamType == item.Examtype" @click="examTypeChange(item)">{{
                                    item.Examtypename
                                }}</el-button>
                        </div>

                    </div>
                    <div class="item mt10">
                        <div class="ml10 mb15 fw500 f13 mt10 tl">检查机房</div>
                        <div class="grid_content exam_class">
                            <el-button class="mb10 ml10 " v-for="item in roomList" type="filtrate_button"
                                :plain="searchData.ExamRoomID.includes(item.ExamRoomId)" @click="roomChange(item)">{{
                                    item.ExamRoom
                                }}</el-button>
                        </div>

                    </div>
                    <div class="item mt10">
                        <div class="ml10 mb15 fw500 f13 mt10 tl">是否增强 </div>
                        <div class="grid_content ">
                            <el-button class="mb10 ml10 " v-for="item in enhanceList" type="filtrate_button"
                                :plain="searchData.IsEnhancement == item.code" @click="enhanceChange(item)">{{ item.name
                                }}</el-button>
                        </div>

                    </div>
                    <div class="item mt10">
                        <div class="ml10 mb15 fw500 f13 mt10 tl">Tab显示设置 </div>
                        <div class="grid_content ">
                            <el-button class="mb10 ml10 " v-for="item in tabList" type="filtrate_button"
                                :plain="searchData.SearchTab.includes(item.DicCode)" @click="tabChange(item)">{{ item.DicValue
                                }}</el-button>
                        </div>

                    </div>
                </div>
                <div class="mb10 h50 row w100 bottom">
                    <el-button type="reset" @click="resetFn">重置</el-button>
                    <el-button class="ml50" type="primary" @click="serachFn(true)">查询</el-button>

                </div>
            </div>
        </el-drawer>
    </div>
</template>

<script>
import SearchTime from '@/components/common/SearchTime.vue'
import commonTool from '@/api/common'
// import { mapGetters } from 'vuex';
import store from '@/store'
import {
    saveSearchFilter,
    getSearchFilter,
    GetSearchTabList
} from '@/api/user'
import moment from 'moment'

import { Message } from 'element-ui';

export default {
    data() {
        return {
            //默认预检时间当天
            searchData: {
                ExamType: '',//检查类型
                DateType: '0',//0 预检时间  1 签到时间   2 登记时间
                beginDate: moment().format('YYYY-MM-DD') + ' 00:00:00',
                endDate: moment().format('YYYY-MM-DD') + ' 23:59:59',
                ExamRoomID: [],//,号隔开
                // OrderState: '',
                IsEnhancement:'',//是否增强
                SearchTab:[],//当前选中tab
            },
            currentExamItem: {},
            direction: 'rtl',
            initTime: [moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
            timeType: 0,
            selectData: {
                examtypes: [],
                roomLists: [],
            },
            enhanceList: [
                {
                    name: '全部',
                    code: '',
                },
                {
                    name: '是',
                    code: '1',
                },
                {
                    name: '否',
                    code: '0',
                },
            ],
            stateList: [
                {
                    name: '全部',
                    code: '',
                },
                {
                    name: '未摄片',
                    code: '0',
                },
                {
                    name: '已登记',
                    code: '1',
                },
            ],
            typeList: [],
            roomList: [],
            userInfo: {},

        };
    },
    props: ['filtrateData','tabList'],
    computed: {
        // ...mapGetters(['loginInfo']),
        selectedExamtypes() {

        },

    },
    watch: {
        // '.searchData':{
        //     handler(val){
        //         if(val){
        //             if(val.examtype){
        //                 this.selectData.examtypes = val.examtype.split(',')
        //             }
        //             if(val.examRooms){
        //                 this.selectData.roomLists = val.examRooms.split(',')
        //             }


        //         }
        //     },
        // }
    },
    mounted() {
        this.loginInfo = store.getters.loginInfo
        this.userInfo = JSON.parse(this.loginInfo)
        this.timeType = this.searchData.timeType
        this.init()
    },
    methods: {
        init() {

            //获取检查类型
            this.firstGetExamTypeList()
            // //获取显示tab值
            // this.getTabList()

        },
        examButtonIsPlain(item) {
            return this.selectData.examtypes.includes(item.Examtype)
        },
       
        firstGetExamTypeList() {
            commonTool.getExamTypeList().then(([res, err]) => {
                if (res?.code == 0) {
                    this.typeList = res?.ResultList || []
                }
                //  //获取机房
                 this.getExamRoomList(null,true)
            })


        },
        getExamTypeList() {
            commonTool.getExamTypeList().then(([res, err]) => {
                if (res?.code == 0) {
                    this.typeList = res?.ResultList || []
                }
            })
        },
        getExamRoomList(data,isFirst) {
            let params = {}
            if (data) params = { sExamType: data }
            //sExamType
            commonTool.getExamRoomList(params).then(([res, err]) => {
                if (res?.code == 0) {
                    this.roomList = res?.ResultList || []
                    if (data) {
                        this.searchData.ExamRoomID = this.roomList.map(e => e.ExamRoomId)
                    }
                    console.log('first--------');
                } else {
                    this.roomList = []
                }
                if(isFirst){
                     //获取历史筛选记录
                     this.getSearchFilter({ UserId: this.userInfo.UserId, HospitalId: this.userInfo.HospitalId, DepartmentId: this.userInfo.DepartmentId, })
                }
                if (err) this.roomList = []
            })
           
        },
        enhanceChange(item){
            this.searchData.IsEnhancement = item.code
        },
        tabChange(item){
            if (!this.searchData.SearchTab.includes(item.DicCode)) {
                this.searchData.SearchTab.push(item.DicCode)
            } else {
                let arr = this.searchData.SearchTab.filter(e => e != item.DicCode)
                this.$nextTick(() => {
                    this.searchData.SearchTab = arr
                })
            }
            console.log('数据不对哦',this.searchData.SearchTab);
        },
        // stateChange(item) {
        //     this.searchData.OrderState = item.code
        // },
        examTypeChange(item) {
            //检查类型目前单选
            this.searchData.ExamType = item.Examtype
            //已选机房全部清空
            this.searchData.ExamRoomID = []
            // this.currentExamItem = item
            // if (!this.selectData.examtypes.includes(item.Examtype)) {
            //     this.selectData.examtypes.push(item.Examtype)
            // } else {
            //     let arr = this.selectData.examtypes.filter(e => e != item.Examtype)
            //     this.$nextTick(() => {
            //         this.selectData.examtypes = arr
            //     })
            // }

            //检查机房列表需要变化
            this.getExamRoomList(this.searchData.ExamType)
            // //检查类型变化
            // this.serachFn()
        },
        roomChange(item) {
            //机房变化
            if (!this.searchData.ExamRoomID.includes(item.ExamRoomId)) {
                this.searchData.ExamRoomID.push(item.ExamRoomId)
            } else {
                let arr = this.searchData.ExamRoomID.filter(e => e != item.ExamRoomId)
                this.$nextTick(() => {
                    this.searchData.ExamRoomID = arr
                })
            }
        },
         saveSearchFilter() {
            let data =
            {
                UserID: this.userInfo?.UserId,
                HospitalId: this.userInfo?.HospitalId,
                DepartmentId: this.userInfo?.DepartmentId,
                ExamType: this.searchData.ExamType,//检查类型
                DateType: this.searchData.DateType,//0 预检时间  1 签到时间   2 登记时间
                ExamRoomID: this.searchData.ExamRoomID,//
                IsEnhancement:this.searchData.IsEnhancement,//是否增强
                SearchTab:this.searchData.SearchTab,//当前选中tab
                // OrderState: this.searchData.OrderState,
            }
            console.log('保存筛选信息失败？', data);
             saveSearchFilter(data)
           
        },
        //获取查询条件
         getSearchFilter(data) {

             getSearchFilter(data).then(([res, err])=>{
                if (res?.code == 0 && res?.Result) {
                // Message.success('')
                // 
                this.searchData = Object.assign(this.searchData, res.Result)
                // if (!res.Result.OrderState) {
                //     this.searchData.OrderState = ''
                // }
                this.searchData.SearchTab = res?.Result?.SearchTab||[]
                this.searchData.ExamRoomID = res?.Result?.ExamRoomID || []
                if (res?.Result?.ExamType) {
                    //默认选中第一个检查类型
                    this.searchData.ExamType = res?.Result.ExamType
                    // this.searchData.ExamRoomID = res?.Result?.ExamRoomID
                } else {
                    //默认选中第一个检查类型
                    let typeItem = this.typeList[0]
                    if (typeItem)
                        this.searchData.ExamType = typeItem.Examtype
                    //没有获取到对应记录、直接默认查询
                    // let rooms = this.roomList.map(e => e.ExamRoomId)
                    // this.searchData.ExamRoomID = rooms
                }

            } else {
                //默认选中第一个检查类型
                let typeItem = this.typeList[0]
                if (typeItem)
                    this.searchData.ExamType = typeItem.Examtype
                //没有获取到对应记录、直接默认查询
                // let rooms = this.roomList.map(e => e.ExamRoomId)
                // this.searchData.ExamRoomID = rooms
            }
            //默认加载检查机房
            this.getExamRoomList(this.searchData.ExamType)
            this.serachFn()
            })
         
        },
        handleClose() {
            this.$emit('closeFiltrate')
        },
        timeTypeChange(index) {
            this.$nextTick(() => {
                this.timeType = index
            })



        },
        getSearchTimes(val) {
            if (val[0]) {
                this.searchData.beginDate = val[0] + ' 00:00:00'
            }
            if (val[1]) {
                this.searchData.endDate = val[1] + ' 23:59:59'
            }

        },
        resetFn() {
            //重置搜索数据

            //重置到默认状态
            this.searchData = {
                ExamType: '',//检查类型---
                DateType: '0',//0 预检时间  1 签到时间   2 登记时间
                beginDate: moment().format('YYYY-MM-DD') + ' 00:00:00',
                endDate: moment().format('YYYY-MM-DD') + ' 23:59:59',
                ExamRoomID: [],//,号隔开
                IsEnhancement:'',//是否增强
                SearchTab:[],//当前选中tab
                // OrderState: '',
            }
            this.saveSearchFilter()


        },
        serachFn(shouldSaveFilter) {

            //保存筛选条件。
            if (shouldSaveFilter) {
                // if (this.searchData?.OrderState != '' && !this.searchData?.OrderState) {
                //     this.$message.error('请选择检查状态', 'msg')
                //     return
                // }
                 if (!this.searchData?.SearchTab  || this.searchData?.SearchTab.length == 0) {
                    this.$message.error('请选择显示Tab', 'msg')
                    return
                }
                if (this.searchData?.ExamType?.length == 0 || !this.searchData?.ExamType) {
                    this.$message.error('请选择检查类型', 'msg')
                    return
                }
                if (this.searchData?.ExamRoomID?.length == 0 || !this.searchData?.ExamRoomID) {
                    this.$message.error('请选择检查机房', 'msg')
                    return
                }
                this.saveSearchFilter()
            }


            this.$emit('search', this.searchData)
        },

    },
    components: {
        SearchTime
    },
}
</script>
<style lang='less' scoped>
.drawer_content {

  
    ::v-deep .el-drawer.rtl {
        // border-radius: 10px;
        border-top-left-radius: 5px;
    }

    .scroll_all {
        position: absolute;
    }

    .scroll_content {
        height: calc(100% - 70px);
        overflow-y: auto;
        position: relative;
        left: 0;
        top: 0;
        right: -17px;
        // padding-right: 17px;
    }

    ::v-deep .el-drawer__header {
        display: none;
    }

    .item {
        border-top: 1px solid #DCDFE6;
    }

    .time_class {
        ::v-deep .el-input__inner {
            height: 34px;
            line-height: 34px;
            background-color: #F0F4F9;
            border: none;
            color: #2B354A;
        }

        ::v-deep .el-input__icon {
            line-height: 34px;
            color: #1C8BE4;
        }

        ::v-deep .el-date-picker.has-sidebar {
            width: 100vw;

            ::v-deep .el-picker-panel__body {
                width: 300px;
                margin-left: calc(100vw - 300px);
            }
        }

        // ::v-deep .el-picker-panel__body {
        //     width: 300px;
        //     margin-left: calc(100vw - 300px);
        // }
        ::v-deep .el-date-table th {
            width: 24px;
            height: 24px;
            line-height: 24px;
            padding: 0px;
            text-align: center;
        }

        ::v-deep .el-date-picker {
            width: 300px;
        }

        ::v-deep .el-picker-panel__sidebar {
            width: calc(100vw - 300px);
        }

        ::v-deep .el-picker-panel__content {
            margin: 0px !important;
            width: 100% !important;
        }

        ::v-deep .el-date-picker__header {
            margin: 0px !important;
            width: 100% !important;

        }
    }

    .bottom {
        ::v-deep .el-button {
            width: 100px;
            padding: 10px 5px;
        }

        .el-button+.el-button {
            margin-left: 50px;
        }
    }
}

.time_button {
    .el-button+.el-button {
        margin-left: 26px;
    }
}


.exam_class {
    .el-button--filtrate_button {
        font-size: 12px !important;
        // border: none;
        // color: #2B354A;
        // background-color: #F0F4F9;
        // padding: 10px 5px;
        // font-weight: 400;
        // font-size: 13px;
        // width: 96px;
        // white-space: nowrap;
        // overflow: hidden;
        // text-overflow: ellipsis;


        // // &:focus{
        // //     color:  #1C8BE4;
        // //     background-color: #DDEEFB;

        // // }
        // // &:hover {
        // //     color: #1C8BE4;
        // //     background-color: #DDEEFB;

        // // }

        // // &:active {
        // //     color: #1C8BE4;
        // //     background-color: #DDEEFB;

        // // }


        // //借助是否朴素按钮来实现默认选中样式
        // &.is-plain {
        //     color: #1C8BE4;
        //     background-color: #DDEEFB;
        // }

        // &.is-disabled,
        // &.is-disabled:focus,
        // &.is-disabled:hover {
        //     color: #C0C4CC;
        // }
    }
}

//reset
.el-button--reset {
    border: 1px solid #1C8BE4;
    color: #1C8BE4;
    background-color: #FFF;
    font-weight: 400;


    &:focus,
    &:hover {
        color: #1C8BE4;
        background-color: #DDEEFB;

    }

    &:active {
        color: #1C8BE4;
        background-color: #DDEEFB;

    }


    //借助是否朴素按钮来实现默认选中样式
    &.is-plain {
        color: #1C8BE4;
        background-color: #DDEEFB;
    }

    &.is-disabled,
    &.is-disabled:focus,
    &.is-disabled:hover {
        color: #C0C4CC;
    }
}

.el-button--filtrate_button_time {
    border: none;
    color: #2B354A;
    background-color: #F0F4F9;
    padding: 10px 5px;
    font-weight: 400;
    font-size: 13px;
    width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;


    // &:focus{
    //     color:  #1C8BE4;
    //     background-color: #DDEEFB;

    // }
    // &:hover {
    //     color: #1C8BE4;
    //     background-color: #DDEEFB;

    // }

    // &:active {
    //     color: #1C8BE4;
    //     background-color: #DDEEFB;

    // }


    //借助是否朴素按钮来实现默认选中样式
    &.is-plain {
        color: #1C8BE4;
        background-color: #DDEEFB;
    }

    &.is-disabled,
    &.is-disabled:focus,
    &.is-disabled:hover {
        color: #C0C4CC;
    }
}

.el-button--filtrate_button {
    border: none;
    color: #2B354A;
    background-color: #F0F4F9;
    padding: 10px 5px;
    font-weight: 400;
    font-size: 13px;
    width: 90px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;


    // &:focus{
    //     color:  #1C8BE4;
    //     background-color: #DDEEFB;

    // }
    // &:hover {
    //     color: #1C8BE4;
    //     background-color: #DDEEFB;

    // }

    // &:active {
    //     color: #1C8BE4;
    //     background-color: #DDEEFB;

    // }


    //借助是否朴素按钮来实现默认选中样式
    &.is-plain {
        color: #1C8BE4;
        background-color: #DDEEFB;
    }

    &.is-disabled,
    &.is-disabled:focus,
    &.is-disabled:hover {
        color: #C0C4CC;
    }
}

.grid_content {
    display: grid;
    grid-template-columns: repeat(3, 106px);
}
</style>